<template>
    <div class="container">
        <div class="tip" v-if="page >= total && tipFlag">没有更多数据了呢~</div>
        <div class="loading-box" v-if="loadingFlag && page <= total">
            <div class="loading-box-text">

                <div class="loading"></div>
                <div class="text">正在加载中...</div>
            </div>
        </div>
        <!-- <div style="height: 50px;"></div> -->

    </div>
</template>
<script setup>
import { ref, toRefs } from "vue";
const props = defineProps({
    page: Number, //接受页数
    total: Number, //接收总页数
    loadingFlag: Boolean, //是否正在加载数据
    tipFlag: Boolean, //是否显示 "没有更多数据的提示"
});
const { pag, total, loadingFlag, tipFlag } = toRefs(props)
</script>
<style lang="scss">
.container {
    padding: 30px;

    .tip {
        color: #858a99;
        font-size: 24px;
        text-align: center;
        margin: 5px;
    }

    .loading-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 6px;

        .loading-box-text {
            display: flex;
            align-items: center;
            color: #858a99;

            .text {
                font-size: 18px;
                margin-left: 8px;
            }

            .loading {
                width: 14px;
                height: 14px;
                border: 2px solid #858a99;
                border-top-color: transparent;
                border-radius: 100%;
                text-align: center;
                animation: circle infinite 0.75s linear;
            }

            // 转转转动画
            @keyframes circle {
                0% {
                    transform: rotate(0);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        }


    }
}
</style>
